* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*初始化*/
/*设定所有的 li  去掉前面的小圆点去掉*/
li {
  list-style: none;
}
/*声明字体 就是中间列 里面的数字 字体*/
/*把自己准备的字体放进来*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
/* 整个样式*/
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-y:hidden;
  padding: 0;
  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
  background: url(../images/bg.jpg) no-repeat #000;
  background-size: cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}

/*-----------------------------------*/
/* 头部样式*/
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
}
/* 头部标题*/
header h1 {
  font-size: 0.475rem;
  color: #fff;
  text-align: center;
  line-height: 1rem;
}
/* 头部时间*/
header .showTime {
  position: absolute;
  top: 0;
  right: 0.375rem;
  line-height: 0.9375rem;
  font-size: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
}

/*---------------------------------------*/
/*<!--  页面主体部分  -->*/
.mainbox {
  /*页面最小宽度*/
  min-width: 1024px;
  /*页面最大宽度*/
  max-width: 1920px;
  /*上下左右内边距 不会贴着body*/
  padding: 0.125rem 0.125rem 0;
  /*切分 display: flex; 为父亲 */
  display: flex;
}

/*三个孩子 都占3份*/
.mainbox .column {
  flex: 3;
}

/*第二个孩子占5分*/
.mainbox .column:nth-child(2) {
  flex: 5;
  /*一共三列 每一列的边距*/
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

/*-----------------------------------------*/
/*panel （公共面板）开始写每一个盒子样式*/
/*可以适用 panel bar --panel line --panel pie*/
/*一个panel 里面包含一个h2 两个div */
.panel {
  position: relative;
  /*小盒子 高度*/
  height: 3.875rem;
  /*边框*/
  border: 1px solid rgba(25, 186, 139, 0.17);
  /*背景*/
  background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png);
  /*内边距*/
  padding: 0 0.1875rem 0.5rem;
  /*下边距*/
  margin-bottom: 0.1875rem;
}
/*利用panel盒子 before和after制作上面的直角*/
.panel::before {
  /*position 采用定位的方法absolute relative*/
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  /*左上直角*/
  /*上*/
  border-top: 2px solid #02a6b5;
  /*左*/
  border-left: 2px solid #02a6b5;
}

/*右上直角*/
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  /*上*/
  border-top: 2px solid #02a6b5;
  /*右*/
  border-right: 2px solid #02a6b5;
}

/*panel 下面也有盒子 这个div的样式*/
/*小盒子里面 再加底部小盒子*/
.panel .panel-footer {
  position: absolute;
  left: 0;
  /*最底下*/
  bottom: 0;
  /*宽度和panel一样*/
  width: 100%;
}

/*用小盒子  来制作直角 */
/*左下直角*/
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
/*右下直角*/
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}

/*------------------以上，把装图形的小盒子完成，包括直角，背景，宽度高度*/

/*左侧盒子 里面有三个图形 包括 bar line  pie*/

/*图表标题样式*/
.panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  font-size: 0.25rem;
  font-weight: 400;
}

.panel h2 a {
  margin: 0 0.1875rem;
  color: #fff;
  text-decoration: underline;
}

/*图表的样式 只要高度进行 宽度已经设置好*/
.panel .chart {
  height: 3rem;
}


/*-----------------------------------*/
/*中间的样式  中间又包括两个div*/
/*上面的数字模块是no*/
.no {
  /*背景颜色*/
  background: rgba(101, 132, 226, 0.1);
  /*内边距*/
  padding: 0.1875rem;
}
/*no里面又包括两个盒子*/
/*上面个放数字+直角*/

.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
/*左上直角*/
.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
/*右下直角*/
.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
/*no-hd 里面放两个 li 放数字 */
/*水平放置 各占一份 flex: 1;*/
.no .no-hd ul {
  /*切分 display: flex; 为父亲 */
  display: flex;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  /*文字要居中*/
  text-align: center;
  height: 1rem;
  /*每个小 li  高度*/
  line-height: 1rem;
  /*文字大小*/
  font-size: 0.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  /*把自己准备的字体放进来*/
  font-family: electronicFont;
  font-weight: bold;
}
/*两个li 中间的竖线*/
.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

/*下面放中文文字*/
/*做法和前面一样*/
.no .no-bd ul {
  /*切分 display: flex; 为父亲 */
  display: flex;
}
.no .no-bd ul li {
  /*各占一份*/
  flex: 1;
  height: 0.5rem;
  /*高度*/
  line-height: 0.5rem;
  /*居中*/
  text-align: center;
  font-size: 0.5rem;
  color: #ffffff;
  padding-top: 0.125rem;
}


/*下面的地图是map*/
.map {
  position: relative;
  height: 10.125rem;
}
/*地图样式*/
.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  /*压住*/
  z-index: 5;
  height: 10.125rem;
  width: 100%;
}
/*球体图片*/
.map .map1 {
  width: 6.475rem;
  height: 6.475rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/map.png);
  background-size: 100% 100%;
  opacity: 0.3;
}
/*旋转*/
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(../images/lbx.png);
  background-size: 100% 100%;
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
}
/*还有一个旋转*/
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(../images/jt.png);
  background-size: 100% 100%;
  animation: rotate2 15s linear infinite;
}
/*--------------------------------------*/


/*旋转动画 map2 顺时针*/
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/*旋转动画 map3  逆时针*/
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/*约束屏幕尺寸*/
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}
